---
id: structural-directive
title: Structural Directive
description: Structural Directive | Transloco Angular i18n
---

Using a structural directive is the **recommended** approach. It's DRY and efficient, as it creates one subscription per template:

```html title="home.component.html"
<ng-container *transloco="let t">
  <p>{{ t('title') }}</p>

  <comp [title]="t('title')"></comp>
</ng-container>
```

Note that the `t` function is **memoized**. It means that given the same key it will return the result directly from the cache.

We can pass a `params` object as the second parameter:

```html title="home.component.html"
<ng-container *transloco="let t">
  <p>{{ t('name', { name: 'Transloco' }) }}</p>
</ng-container>
```

```json title="en.json"
{
  "name": "My name is {{name}}"
}
```

We can instruct the directive to use a `different` language in our template:
```html {1} title="home.component.html"
<ng-container *transloco="let t; lang: 'es'">
  <p>{{ t('title') }}</p>
</ng-container>
```

This will translate each key based on the `Spanish` language translation file.

## Get the current language
We can obtain the resolved language by using the `currentLang` context variable:

```html {1} title="home.component.html"
<ng-container *transloco="let t; currentLang as currentLang">
  <p>The resolved language is {{ currentLang }}</p>
</ng-container>
```

## Utilizing the read input
We can use the `read` input in the structural directive to get translations of a particular nested (including deeply nested) property.

Let's say we need to use the `dashboard` scope all over the template. Given this translation file:
```json title="en.json"
{
  "foo": "Foo",
  "bar": "Bar"
  "dashboard": {
    "title": "Dashboard Title",
    "desc": "Dashboard Desc"
  }
}
```

we can write:

```html {1} title="home.component.html"
<ng-container *transloco="let t; read: 'dashboard'">
  <p>{{ t('title') }}</p>
</ng-container>
```

without having to repeat the `dashboard` key in each translation. Under the hood, it will do the following for you:
```html
<ng-container *transloco="let t;">
  <h1>{{ t('dashboard.title') }}</h1>
  <p>{{ t('dashboard.desc') }}</p>
</ng-container>
```
